<template>
	<view class="petDetails">
		<view class="topBack">
			<u-form :model="form" ref="uForm">
				<image class="petImg" :src="petInfoJson.head"></image>
				<view class="addPetTop addPetTopTow">
					<view class="addPetTopTitleDiv">
						<view class="addPetTopTitleLeft"></view>
						<text class="addPetTopTitleText">宠物信息</text>
					</view>

					<u-form-item label="宠物昵称" label-width="314rpx" prop="nickname">
						<u-input v-model="petInfoJson.nickname" placeholder="请填写宠物昵称" :disabled="true" />
					</u-form-item>

					<u-form-item label="宠物生日" label-width="314rpx" prop="intdate">
						<!-- <uniDataSelect :widthNum="286" :localdata="list" :modelValue="form.intdate" @change="changeFun"
							:clear="false" placeholder="请选择宠物生日" :disabled="true"></uniDataSelect> -->
						<u-input v-model="petInfoJson.birth_date" placeholder="请选择宠物生日" :disabled="true" />
					</u-form-item>
					<u-form-item label="宠物性别" label-width="314rpx">
						<uniDataSelect :widthNum="286" :localdata="sexList" :modelValue="petInfoJson.sex"
							:value="petInfoJson.sex" :clear="false" placeholder="请选择宠物性别" :disabled="true">
						</uniDataSelect>
					</u-form-item>
					<u-form-item label="宠物种类" label-width="314rpx">
						<u-input v-model="petInfoJson.cate_name" placeholder="请填写宠物种类" :disabled="true" />
					</u-form-item>
					<u-form-item label="宠物品种" label-width="314rpx">
						<u-input v-model="petInfoJson.breed" placeholder="请填写宠物品种" :disabled="true" />
					</u-form-item>
					<u-form-item label="备注" label-width="314rpx" label-position="top" :border-bottom="false">
						<u-input v-model="petInfoJson.remark" placeholder="请填写备注" :disabled="true" />
					</u-form-item>
				</view>
				<view class="adressDiv">
					<view class="adressDivTop">当前定位</view>
					<view class="adressDivBottom">
						<text class="adressDivBottomLeft">{{address.address}}</text>
						<image class="adressDivBottomRight"
							src="https://chongwu.aitaoba.net/storage/uploads/20231118/aa37f04c6205eccd89bf43278c3dd657.png">
						</image>
					</view>
				</view>

				<view class="addPetTop addPetTopTow">
					<view class="addPetTopTitleDiv">
						<view class="addPetTopTitleLeft"></view>
						<text class="addPetTopTitleText">主人信息</text>
					</view>

					<u-form-item label="主人称呼" label-width="314rpx">
						<u-input v-model="petInfoJson.user_call" placeholder="请填写主人称呼" :disabled="true" />
					</u-form-item>
					<u-form-item label="联系方式1" label-width="314rpx">

						<u-input v-model="petInfoJson.phone_1" placeholder="联系方式1" :disabled="true" type="tel"
							@telFun="makingPhoneCalls(petInfoJson.phone_1)">

						</u-input>




					</u-form-item>
					<u-form-item label="联系方式2" label-width="314rpx">

						<u-input v-model="petInfoJson.phone_2" placeholder="联系方式2" :disabled="true" type="tel"
							@telFun="makingPhoneCalls(petInfoJson.phone_2)">

						</u-input>




					</u-form-item>
				</view>

				<view class="butttonBottom" v-if="petInfoJson.is_owner == 0">
					<button class="uploadAs" @click="uploadAs">定位不准,重新上传</button>
					<button class="setInformation" @tap="setInformation">设置信息,让主人联系</button>

				</view>
				<view class="kong"></view>

			</u-form>
		</view>
		<view class="bottomButton" v-if="petInfoJson.is_owner == 0"
			@tap="contactThePetOwner(petInfoJson.phone_1,petInfoJson.phone_2)">
			<image class="bottomButtonImg"
				src="https://chongwu.aitaoba.net/storage/uploads/20231118/305a83c2dd3868d7e0098221225fa0e7.png"></image>
		</view>
		<!-- 设置信息-->
		<view class="retrievedPopDiv" v-if="retrievedPopState" @tap="retrievedPopState=false">
			<view class="retrievedPopLi"
				style="background: url('https://chongwu.aitaoba.net/storage/uploads/20231118/a2dc1674f091a4a081de9af4206b609f.png') no-repeat;background-size: 100% 100%;">
				<u-form :model="informationForm" ref="informationFormRef">
					<u-form-item label="我的称呼" label-width="314rpx" label-position="top" :border-bottom="false"
						prop="nickname">
						<u-input v-model="informationForm.nickname" placeholder="请填写我的称呼" class="setInputClass" />
					</u-form-item>
					<u-form-item label="联系电话" label-width="314rpx" label-position="top" :border-bottom="false"
						prop="phone">
						<u-input v-model="informationForm.phone" placeholder="请填写联系电话" class="setInputClass" />
					</u-form-item>
					<u-form-item label="约见地址" label-width="314rpx" label-position="top" :border-bottom="false"
						prop="address">
						<u-input v-model="informationForm.address" placeholder="请填写约见地址" class="setInputClass" />
					</u-form-item>
					<button class="submitButton" @click.stop="goSuccessfullySet">保存</button>
				</u-form>
			</view>
		</view>
	</view>
</template>

<script>
	import uniDataSelect from '@/components/uniDataSelect/uniDataSelect.vue'
	import {
		petInfo,
		getRegionInfo,
		saveScavengerInfo
	} from '@/api/pet.js'
	export default {
		components: {
			uniDataSelect,
		},
		data() {
			return {
				deledeState: false,
				binding: false,
				retrievedPopState: false,
				form: {},
				petInfoJson: {
					head: '',
					nickname: '',
					birth_date: '',
					sex: 1,
					cate_name: '',
					breed: '',
					remark: '',
					address: [],
					user_call: '',
					phone_1: '',
					phone_2: '',
				},
				rules: {
					head: [{
						required: true,
						message: '请上传宠物照片',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					nickname: [{
						required: true,
						message: '请输入宠物昵称',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					birth_date: [{
						required: true,
						message: '请选择宠物生日',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					intro: [{
						min: 5,
						message: '简介不能少于5个字',
						trigger: 'change'
					}]
				},

				checkboxList: [{
						name: '苹果',
						checked: false,
						disabled: false
					},
					{
						name: '雪梨',
						checked: false,
						disabled: false
					},
					{
						name: '柠檬',
						checked: false,
						disabled: false
					}
				],
				radioList: [{
						name: '鲜甜',
						disabled: false
					},
					{
						name: '麻辣',
						disabled: false
					}
				],
				radio: '',
				switchVal: false,
				list: [{
					text: '2021-11-05',
					value: '2021-11-05'
				}, {
					text: '2021-12-05',
					value: '2021-12-05'
				}],
				sexList: [{
					text: '囡囡',
					value: '1'
				}, {
					text: '仔仔',
					value: '2'
				}, ],
				telList: [{
					text: '电话',
					value: '1'
				}, {
					text: 'qq',
					value: '2'
				}],
				card_sn: '',
				informationForm: {
					nickname: '',
					phone: '',
					address: '',
				},
				informationRules: {

					nickname: [{
						required: true,
						message: '请填写我的称呼',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					phone: [{
						required: true,
						message: '请填写联系电话',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					address: [{
						required: true,
						message: '请填写约见地址',
						trigger: ['change', 'blur'],
					}]
				},
				address: {}
			};
		},

		/**
		 * 跳转到个人中心
		 */
		onBackPress(e) {

		},
		onPullDownRefresh() {

		},
		onShow() {

			uni.$on('isRefresh', (data) => {
				console.log('监听到事件来自返回的参数', data);
				// TODO 下面执行刷新的方法
				this.scanCodeDetails(data);
			})

		},

		onLoad(options) {
			console.log(options, 'opopop')
			// if (options.scene) {
			// 	this.card_sn = (options.scene).split('%3D')[1]
			// 	this.scanCodeDetails(this.card_sn);
			// }
			uni.getLocation({
				type: 'wgs84',
				geocode: true,
				success: (res) => {
					// fcqwhApQ
					console.log(res, "获取经纬度成功");
					// const re = _this.$mapChange.wgs84Togcj02(res.longitude, res.latitude)
					// console.log(re)
					// _this.longitude = re[0]
					// _this.latitude = re[1]
					let data = {
						longitude: res.longitude,
						latitude: res.latitude
					};
					getRegionInfo(data).then((resJ) => {
						console.log(resJ, '看看经纬度的位置信息', resJ.code)
						if (resJ.code == 200) {
							this.card_sn = (options.scene).split('%3D')[1]
							this.scanCodeDetails(this.card_sn);
							this.address = {
								'longitude': res.longitude,
								'latitude': res.latitude,
								'address': resJ.data.address
							};
							console.log(this.address, '看看要上传的地理位置参数')
							// this.uploadInformation(address, 'address');
						}
					}).catch((res) => {})
				},
				fail: () => {
					console.log("获取经纬度失败");
				},
			})




		},
		onReady() {
			console.log(this.$refs, '看看$refs')
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)

		},

		watch: {

		},
		methods: {
			// 联系宠主
			contactThePetOwner(phone_1, phone_2) {
				let tel = phone_1 ? phone_1 : phone_2;
				uni.makePhoneCall({
					phoneNumber: tel, //仅为示例，并非真实的电话号码
					success: function() {
						console.log("拨打电话成功！")
					},
					fail: function() {
						console.log("拨打电话失败！")
					}
				})
			},
			// 打开设置信息弹窗
			setInformation() {
				this.retrievedPopState = true;
				this.$nextTick(() => {
					this.$refs.informationFormRef.setRules(this.informationRules)
				})

			},
			// 定为不准重新上传
			uploadAs() {
				uni.getLocation({
					type: 'wgs84',
					geocode: true,
					success: (res) => {
						console.log(res, "获取经纬度成功");
						// const re = _this.$mapChange.wgs84Togcj02(res.longitude, res.latitude)
						// console.log(re)
						// _this.longitude = re[0]
						// _this.latitude = re[1]
						let data = {
							longitude: res.longitude,
							latitude: res.latitude
						};
						getRegionInfo(data).then((resJ) => {
							// console.log(resJ, '看看经纬度的位置信息')
							if (resJ.code == 200) {
								this.scanCodeDetails(this.card_sn);
								this.address = {
									'longitude': res.longitude,
									'latitude': res.latitude,
									'address': resJ.data.address
								};

								// console.log(address, '看看要上传的地理位置参数')
								this.uploadInformation();
							}
						}).catch((res) => {})
					},
					fail: () => {
						console.log("获取经纬度失败");
					},
				})
			},
			// 上传地理位置或者失遗者信息
			uploadInformation(parameter, str) {
				// let data = {
				// 	id: this.petInfoJson.id
				// };
				// if (str == 'address') {
				// 	data.address = parameter;
				// 	delete data.kind_person
				// }else if(str=='kind_person'){
				// 	data.kind_person = parameter;
				// 	delete data.address
				// }
				saveScavengerInfo({
					id: this.petInfoJson.id,
					address: this.address,
					kind_person: {
						nickname: this.informationForm.nickname,
						phone: this.informationForm.phone,
						address: this.informationForm.address
					}
				}).then((res) => {
					if (res.code == 200) {
						if (str == 'address') {
							uni.showToast({
								title: '地理位置上传成功',
								duration: 2000,
							})
							// 刷新详情的地理位置
							this.scanCodeDetails(this.card_sn);
						} else if (str == 'kind_person') {
							uni.showToast({
								title: '失遗者信息设置成功',
								duration: 2000,
							})
							this.retrievedPopState = false;
							// 去设置成功页面
							uni.navigateTo({
								url: "/pages/successfullySet/successfullySet"
							})
						}
					}
				}).catch((res) => {})

			},
			// 调详情接口拿数据
			scanCodeDetails(card_sn) {
				let data = {
					card_sn,
				};
				petInfo(data).then((res) => {
					console.log(res, '看看详情接口res')
					if (res.code == 200) {
						this.petInfoJson = res.data;
						// this.$set(this, 'petInfoJson', res.data)
						console.log(this.petInfoJson, '看看详情数据')
					} else if (res.code == 4001) {
						console.log('00000000000000000', card_sn)
						uni.redirectTo({
							url: "/pages/addPet/addPet?card_sn=" + card_sn
						})
					} else if (res.code == 404) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch((res) => {
					console.log(res, '看看详情接口报错res')

				})
			},
			goRetrieved() {
				uni.navigateTo({
					url: "/pages/retrieved/retrieved"
				})
			},
			retrievedPopOpen() {
				this.retrievedPopState = true;
			},

			// 拨打电话
			makingPhoneCalls(tel) {

				uni.makePhoneCall({
					phoneNumber: tel, //仅为示例，并非真实的电话号码
					success: function() {
						console.log("拨打电话成功！")
					},
					fail: function() {
						console.log("拨打电话失败！")
					}
				})
			},
			// 去设置成功
			goSuccessfullySet() {

				let that = this;
				this.$refs.informationFormRef.validate(valid => {
					if (valid) {
						console.log('验证通过');
						let data = [that.informationForm.nickname, that.informationForm.phone, that.informationForm
							.address
						];
						that.uploadInformation(data, 'kind_person');

					} else {
						console.log('验证失败');
					}
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.petDetails {
		width: 100%;
		display: flex;
		flex-direction: column;
		// padding-bottom: 170rpx;
		// box-sizing: border-box;
	}

	.topBack {
		width: 750rpx;
		height: 257rpx;
		background: linear-gradient(180deg, #FAE24E 0%, rgba(250, 226, 78, 0) 100%);
		border-radius: 0rpx;
		padding: 40rpx 30rpx 0rpx 30rpx;
		box-sizing: border-box;
	}

	.petImg {
		width: 690rpx;
		height: 460rpx;
		background: #FFFADB;
		border-radius: 20rpx;

	}

	.addPetTop {
		width: 690rpx;
		// height: 355rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		display: flex;
		flex-direction: column;
		padding: 43rpx 39rpx 46rpx 21rpx;
		box-sizing: border-box;
	}

	.addPetTopOne {
		padding-bottom: 46rpx !important;
	}

	.addPetTopTow {
		padding-bottom: 59rpx !important;
		margin-top: 20rpx;
	}

	.addPetTopTitleDiv {
		display: flex;
		align-items: center;
	}

	.addPetTopTitleLeft {
		width: 8rpx;
		height: 30rpx;
		background: #FAE24E;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		opacity: 1;
		border: 1rpx solid #683518;
	}

	.addPetTopTitleText {
		font-size: 32rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #2E2908;
		margin-left: 9rpx;
	}

	.addPetBottom {
		display: flex;
		align-items: center;
		padding-left: 18rpx;
		box-sizing: border-box;
		margin-top: 21rpx;
	}


	.uploadDiv {
		width: 200rpx;
		height: 200rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		opacity: 1;
		border: 1rpx dashed #B6AAA3;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.uploadImg {
		width: 200rpx;
		height: 200rpx;
	}

	.uploadLiDiv {
		width: 57.81rpx;
		height: 56.46rpx;

	}

	.marginTop20 {
		margin-top: 20rpx;
	}

	.kongbai {
		width: 100%;
		// height: 162rpx;
		height: 222rpx;
	}

	.submitButtonClass {
		width: 750rpx;
		height: 98rpx;
		background: #FED24C;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #5D5353;
		justify-content: center;
		align-items: center;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 3;
	}

	::v-deep .addPetBottom .u-form-item__message {
		padding-left: 30rpx !important;
	}

	.adressDiv {
		width: 690rpx;
		height: 156rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		margin-top: 20rpx;
		padding: 30rpx 30rpx 30rpx 30rpx;
		box-sizing: border-box;
	}

	.adressDivTop {
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #2E2908;
	}

	.adressDivBottom {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 32rpx;
	}

	.adressDivBottomLeft {
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #2E2908;
	}

	.adressDivBottomRight {
		width: 30rpx;
		height: 36rpx;
	}

	.kongbai {
		width: 100%;
		height: 170rpx;
	}

	.Retrieved {
		width: 320rpx;
		height: 97rpx;
		outline: none;
		position: fixed;
		left: 211rpx;
		bottom: 162rpx;
		z-index: 3;
		margin: 0;
		padding: 0;
		background: none;
		border: none;
	}

	.retrievedImg {
		width: 320rpx;
		height: 97rpx;
	}

	.bottomView {
		width: 750rpx;
		height: 98rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		z-index: 4;
	}

	.deleteButton {
		width: 259rpx;
		height: 98rpx;
		background: #FED24C;
		border-radius: 0rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.eadri {
		width: 491rpx;

		background: #FFFFFF;

	}

	.deleteIcon {
		width: 30rpx;
		height: 30rpx;
	}

	.deleteText {
		font-size: 30rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #2E2908;
	}

	.retrievedPopDiv {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.3);
		z-index: 5;
	}

	.retrievedPopLi {
		width: 750rpx;
		height: 1062rpx;

		position: absolute;
		left: 0;
		bottom: 0;
		z-index: 6;

		animation: heightTransition 0.1s ease-in-out;
		padding: 200rpx 30rpx 0 30rpx;
		box-sizing: border-box;
	}

	.deletePopLi {
		width: 750rpx;
		height: 780rpx;

		position: absolute;
		left: 0;
		bottom: 0;
		z-index: 6;

		animation: heightDelete 0.1s ease-in-out;
	}

	.deletePopLiTopText {
		width: 578rpx;
		font-size: 34rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #2E2908;
		text-align: center;
		position: absolute;
		left: 86rpx;
		top: 334rpx;
		z-index: 7;
	}

	.qxButton {
		width: 300rpx;
		height: 88rpx;
		background: #F1F2F6;
		border-radius: 20rpx;
		outline: none;
		font-size: 28rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #2E2908;
		text-align: center;
		line-height: 88rpx;
		position: absolute;
		left: 64rpx;
		top: 553rpx;
		z-index: 7;

	}

	.qrButton {
		background: #FED24C;
		left: 386rpx;
	}

	@keyframes heightDelete {
		0% {
			height: 0;
		}

		50% {
			height: 390rpx;
		}

		100% {
			height: 780rpx;
		}
	}

	@keyframes heightTransition {
		0% {
			height: 0;
		}

		50% {
			height: 531rpx;
		}

		100% {
			height: 808rpx;
		}
	}

	.textTop {
		font-size: 56rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #2E2908;
		position: absolute;
		left: 51rpx;
		top: 293rpx;
		z-index: 7;
	}

	.textIn {
		font-size: 40rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #2E2908;
		position: absolute;
		left: 51rpx;
		top: 389rpx;
		z-index: 7;
	}

	.textBottom {
		width: 616rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #2E2908;
		position: absolute;
		left: 51rpx;
		top: 457rpx;
		z-index: 7;
	}

	.colorFontClass {
		color: #FED24C;
	}

	.stillSearching {
		width: 300rpx;
		height: 88rpx;
		background: #F1F2F6;
		border-radius: 20rpx;
		border: none;
		outline: none;
		text-align: center;
		line-height: 88rpx;
		position: absolute;
		left: 64rpx;
		top: 615rpx;
		z-index: 7;
		font-size: 28rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #2E2908;
	}

	.retrieved {
		width: 300rpx;
		height: 88rpx;
		background: #FED24C;
		border-radius: 20rpx;
		border: none;
		outline: none;
		text-align: center;
		line-height: 88rpx;
		position: absolute;
		right: 64rpx;
		top: 615rpx;
		z-index: 7;
		font-size: 28rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #2E2908;
	}

	.addPetBottomDiv {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 50rpx;
	}

	.addPetBottomTopText {
		width: 392rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #2E2908;
	}

	.bindingButton {
		width: 320rpx;
		height: 72rpx;
		background: linear-gradient(178deg, #FF6931 0%, #F0BB26 100%);
		box-shadow: 0rpx 6rpx 12rpx 1rpx rgba(63, 29, 3, 0.1608);
		border-radius: 64rpx;

		border: 2rpx solid #683518;
		outline: none;
		font-size: 30rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #683518;
		text-align: center;
		line-height: 72rpx;
		margin-top: 36rpx;
	}

	.addPetBottomBottomText {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #2E2908;
		margin-top: 26rpx;
	}

	.suffixDiv {
		display: flex;
	}

	.suffixImg {
		width: 30rpx;
		height: 30rpx;
	}

	.butttonBottom {
		width: 100%;
		display: flex;
		align-items: center;
		margin-top: 64rpx;

	}

	.uploadAs {
		width: 300rpx;
		height: 88rpx;
		background: #E6E6E6;
		border-radius: 20rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #2E2908;
		outline: none;
		border: none;
		text-align: center;
		line-height: 88rpx;
	}

	.setInformation {
		width: 300rpx;
		height: 88rpx;
		background: #FED24C;
		border-radius: 20rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #2E2908;
		outline: none;
		border: none;
		text-align: center;
		line-height: 88rpx;
		margin-left: 22rpx;

	}

	.kong {
		width: 100%;
		height: 188rpx;

	}

	.bottomButton {
		width: 750rpx;
		height: 128rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 3;
	}

	.bottomButtonImg {
		width: 100%;
		height: 100%;
	}

	.setInputClass {
		width: 690rpx;
		height: 100rpx;
		background: #FFFFFF;
		border-radius: 20rpx;

		border: 2rpx solid #683518;
		padding-left: 30rpx;
		box-sizing: border-box;
		display: flex;
		align-content: center;
		font-size: 30rpx !important;
	}

	.submitButton {
		width: 690rpx;
		height: 88rpx;
		background: #FED24C;
		box-shadow: 0rpx 6rpx 12rpx 1rpx rgba(63, 29, 3, 0.1608);
		border-radius: 44rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #2E2908;
		outline: none;
		border: none;
		text-align: center;
		line-height: 88rpx;
		margin-top: 72rpx;

	}
</style>